<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>羽球游戏 - 羽毛球世界</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>🏸 羽球小游戏</h1>
        <marquee class="subtitle">快来挑战你的反应速度！</marquee>
    </header>

    <!-- 相同导航栏 -->
    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="history.html">羽球历史</a></li>
            <li><a href="players.html">羽球名将</a></li>
            <li><a href="game.html">羽球小游戏</a></li>
        </ul>
    </nav>

    <main>
        <section class="mini-game">
            <h2>🎮 接球游戏</h2>
            <div class="game-container">
                <canvas id="gameCanvas" width="600" height="400"></canvas>
                <div class="game-overlay">
                    <h2 style="color: white; margin-bottom: 20px;">游戏结束</h2>
                    <button class="restart-btn" onclick="restartGame()">重新开始</button>
                </div>
            </div>
            <div class="game-controls">
                <button ontouchstart="movePaddle(-5)" ontouchend="stopPaddle()" 
                        onmousedown="movePaddle(-5)" onmouseup="stopPaddle()">← 左移</button>
                <button ontouchstart="movePaddle(5)" ontouchend="stopPaddle()" 
                        onmousedown="movePaddle(5)" onmouseup="stopPaddle()">右移 →</button>
            </div>
        </section>
    </main>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const overlay = document.querySelector('.game-overlay');
        
        let gameState = {
            paddleX: 250,
            ball: { x: 300, y: 100, dx: 5, dy: 5 },
            score: 0,
            lives: 3,
            isRunning: true,
            moveSpeed: 0
        };

        // 输入控制
        function movePaddle(speed) {
            gameState.moveSpeed = speed;
        }

        function stopPaddle() {
            gameState.moveSpeed = 0;
        }

        document.addEventListener('keydown', (e) => {
            if(e.key === 'ArrowLeft') movePaddle(-7);
            if(e.key === 'ArrowRight') movePaddle(7);
        });

        document.addEventListener('keyup', stopPaddle);

        // 游戏逻辑
        function updateGame() {
            if(!gameState.isRunning) return;
            
            // 更新球拍位置
            gameState.paddleX = Math.max(0, 
                Math.min(500, gameState.paddleX + gameState.moveSpeed));
            
            // 更新球位置
            gameState.ball.x += gameState.ball.dx;
            gameState.ball.y += gameState.ball.dy;
            
            // 边界碰撞
            if(gameState.ball.x < 8 || gameState.ball.x > 592) {
                gameState.ball.dx *= -1;
            }
            if(gameState.ball.y < 8) {
                gameState.ball.dy *= -1;
            }
                
            // 球拍碰撞
            if(gameState.ball.y + 8 >= 380 && 
               gameState.ball.x >= gameState.paddleX - 8 && 
               gameState.ball.x <= gameState.paddleX + 108) {
                const hitPos = (gameState.ball.x - gameState.paddleX)/100;
                gameState.ball.dx = (hitPos - 0.5) * 10;
                gameState.ball.dy = -Math.abs(gameState.ball.dy) * 1.05;
                gameState.score += 100;
            }
            
            // 失分检测
            if(gameState.ball.y > 400) {
                gameState.lives--;
                if(gameState.lives <= 0) {
                    gameOver();
                } else {
                    resetBall();
                }
            }
        }

        // 画面渲染
        function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制球拍
            ctx.fillStyle = '#4CAF50';
            ctx.fillRect(gameState.paddleX, 380, 100, 10);
            
            // 绘制羽毛球
            ctx.beginPath();
            ctx.arc(gameState.ball.x, gameState.ball.y, 8, 0, Math.PI*2);
            ctx.fillStyle = '#f44336';
            ctx.fill();
            
            // 绘制UI
            ctx.fillStyle = '#2e7d32';
            ctx.font = '20px "Microsoft YaHei"';
            ctx.fillText(`得分: ${gameState.score}  生命: ${gameState.lives}`, 20, 40);
        }

        function resetBall() {
            gameState.ball = {
                x: 300,
                y: 100,
                dx: 5 * (Math.random() > 0.5 ? 1 : -1),
                dy: 5
            };
        }

        function gameOver() {
            gameState.isRunning = false;
            overlay.style.display = 'flex';
        }

        function restartGame() {
            gameState = {
                paddleX: 250,
                ball: { x: 300, y: 100, dx: 5, dy: 5 },
                score: 0,
                lives: 3,
                isRunning: true,
                moveSpeed: 0
            };
            overlay.style.display = 'none';
            gameLoop();
        }

        // 游戏循环
        let lastTime = 0;
        function gameLoop(timestamp) {
            if(gameState.isRunning) {
                const deltaTime = timestamp - lastTime;
                if(deltaTime > 16) {
                    updateGame();
                    drawGame();
                    lastTime = timestamp;
                }
                requestAnimationFrame(gameLoop);
            }
        }
        gameLoop(0);
    </script>
</body>
</html>